<template>
  <div id="order-page" v-loading="myLoading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
       :style="{
    minHeight:(this.getWinSize().height-50-this.getSafeArea().top)+'px',
  }">
    <div id="search-bar" :style="{top:(this.getSafeArea().top-1)+'px'}">
      <div id="search-box">
        <div id="search-input-outer">
          <el-input
            clearable
            type="text"
            class="search-bar-input"
            v-model="searchForm.productData"
            @keyup.enter.native="getOrderList"
            placeholder="搜索你想要的商品..."/>
          <div class="datetime" v-if="searchForm.createdAt && searchForm.createdAt.length>0">
            <span class="ovd_s" v-text="searchForm.createdAt"></span>
            <i class="el-icon-close" @click="setSearchDateTime('')"></i>
          </div>
          <div class="c"></div>
        </div>
        <div id="datetime-button" @click="chooseDateTime">
          筛选
        </div>
        <div class="c"></div>
      </div>
    </div>

    <div id="status-bar" :style="{top:(this.getSafeArea().top+40-4)+'px'}">
      <div class="item" v-for="(item,index) in statusArr" :key="index" :class="searchForm.status===item.key?'curr':''"
           @click="changeStatus(item.key)">
        <span v-text="item.name"></span>
      </div>
    </div>

    <i-scroller-box
      class="order-list"
      ref="i-scroller-box"
      url="Order/getList"
      style="position: relative;"
      :height="getWinSize().height-130-this.getSafeArea().top"
      :style="{
        // paddingBottom:(75)+'px',
        paddingTop:(this.getSafeArea().top+75)+'px',
       width:'100%'}">

      <template v-slot:list-item="{index,data}">
        <div class="item" :key="index">
          <div class="top">
            <div class="shop-box">
              <div class="shop-logo">
                <img :src="data.memberIcon" alt="">
              </div>
              <div class="shop-name" v-text="data.memberNickname"></div>
            </div>
            <div class="status-box">
              <span v-text="data.status.name"></span>
            </div>
          </div>

          <div class="middle" @click="$router.push({name:'OrderDetail',query:{id:data.id}})">
            <div class="right">
              <div class="line1">
                <div class="item" v-for="(product,index) in data.productData">
                  <div class="img">
                    <img :src="product.image" alt="" style="max-width: 90%; max-height: 25px;">
                  </div>
                  <div class="name">
                    <span class="ovd_s" v-text="product.name"></span>
                  </div>
                  <div class="model">
                    <span style="display: inline-block; max-width: 90%" class="ovd_s" v-text="product.model"></span>
                  </div>
                  <div class="price" align="right">
                    <span>￥{{ ToMoney(product.price) }}</span>
                    × {{ product.nums }}
                  </div>
                </div>
              </div>
              <div class="line2">
                <div class="group-info">
                <span v-if="data.orderGroupId!=null" v-text="data.orderGroupStatus.name">
                </span>
                </div>
                <div class="datetime">
                  {{ data.createdAt }}
                </div>
              </div>
              <div class="c"></div>
            </div>
          </div>

          <div class="bottom" align="right">
            <order-act-button :call-back="getOrderList" :curr-order="data"/>
          </div>
        </div>
      </template>
    </i-scroller-box>
  </div>
</template>

<script>
import OrderActButton from '../common/OrderActButton'
import IScrollerBox from '../common/IScrollerBox'

export default {
  name: 'Order',
  components: {IScrollerBox, OrderActButton},
  data: function () {
    return {
      searchForm: {
        productData: '',
        status: '',
        createdAt: '',
      },
      statusArr: [],
      currStatus: '',
      orderList: [],
      myLoading: false,
    }
  },
  mounted () {
    this.statusArr = [{
      'key': '',
      'name': '全部'
    }]

    if (this.$route.query.status && this.$route.query.status !== '') {
      this.searchForm.status = this.$route.query.status
    }

    this.getOrderList()

    let $this = this

    dict.OrderStatusArr.forEach(function (name, index) {
      if (index<4){
        $this.statusArr.push({
          'key': ''+index,
          'name': ''+name
        })
      }
    })
    window.onscroll = function () {
      let scrollPos = $this.getScrollTop()
      let maxHeight = $this.getScrollHeight() - $this.getWinSize().height
      if (scrollPos === 0) {
        // 到达顶部
        // $this.getOrderList()
      }
      // 到达底部
      if (maxHeight - scrollPos <= 0) {
        console.log('到达底部')
        $this.getOrderList()
      }
    }
  },
  destroyed () {
    window.onscroll = null
  },
  methods: {
    chooseDateTime: function () {
      this.bus.$emit('ChooseDateTimeDialogCallBus', this.setSearchDateTime, this.searchForm.createdAt)
    },
    setSearchDateTime: function (dateTime) {
      this.searchForm.createdAt = dateTime
      this.getOrderList()
    },
    changeStatus: function (status) {
      this.searchForm.status = status
      this.getOrderList()
    },
    getOrderList: function () {
      this.$refs['i-scroller-box'].getList({
        page: 1,
        form: this.searchForm
      })
    },
  }
}
</script>

<style scoped>

</style>
